<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/angular.js"></script>

    <script type="text/javascript" src="js/01.js"></script>
    <style type="text/css">
        .container {
            margin-top: 60px;
        }

        .cursor-point {
            cursor: pointer;
            color: #000000;
        }

        .init {
            cursor: default !important;
            /*background-color: white !important;*/
            -webkit-appearance: none;
        }

        #newItem {
            margin-bottom: 30px;
        }

        .my-item {
            margin-bottom: 3px;
        }

        .not-finished {
            color: #CCCCCC;
        }

        .item-finished {
            text-decoration: line-through;
        }

        .app-description{
            margin-top:-30px;
            color: #AAAAAA;;
        }
    </style>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCon1">

    <div class="app-description">
        <span>1.这是一个HTML版的记事本，在输入框中输入内容后回车即可添加一条记录；</span><br/>
        <span>2.对已添加的记录双击即可重新编辑，回车后保存，若重新输入的内容为空，则恢复原来的值；</span><br/>
        <span>3.每一条记录条目的左右各有一个按钮，分别用于表示记录已完成和删除该记录；</span><br/>
        <span>4.本应用使用了JS的本地缓存，只要浏览器不清空缓存数据，关闭浏览器后重新打开，能浏览上次输入的内容；</span><br/>
        <span>5.最好使用谷歌浏览器Chrome浏览。</span><br/>
    </div>
    <hr/>

    <input type="text" id="newItem" class="form-control" placeholder="项目条" ng-keyup="btnInput($event)"
           ng-model="newItem">

    <div id="itemList" ng-repeat="item in itemsList">
        <div class="input-group my-item">
            <div class="input-group-addon cursor-point" ng-class="{'not-finished': !item.finished}"
                 ng-click="divToggleFinish(item)">√
            </div>
            <input type="text" class="form-control init" readonly ng-model="item.name"
                   ng-class="{'item-finished':item.finished}"
                   ng-dblclick="itemDbClick($event,item)" ng-readonly="!item.edit" ng-keyup="btnItemEdit($event,item)"
                   ng-blur="btnItemBlur(item)">

            <div class="input-group-addon cursor-point" ng-click="divDelete(item)">×</div>
        </div>
    </div>
</div>
</body>
</html>